<template>
 <div>
   <div id="myChart" :style="{width: '600px', height: '400px'}"></div>
 </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.initEchart()
  },
  methods: {
    initEchart () {
      var myChart = this.$echarts.init(document.getElementById('myChart'))
      var option

      const item1 = {
        color: '#F54F4A'
      }
      const item2 = {
        color: '#FF8C75'
      }
      const item3 = {
        color: '#FFB499'
      }
      const data = [
        {
          children: [
            {
              value: 5,
              children: [
                {
                  value: 1,
                  itemStyle: item1
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                },
                {
                  children: [
                    {
                      value: 1
                    }
                  ]
                }
              ],
              itemStyle: item1
            },
            {
              value: 10,
              children: [
                {
                  value: 6,
                  children: [
                    {
                      value: 1,
                      itemStyle: item1
                    },
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item2
                    },
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item3
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item3
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                }
              ],
              itemStyle: item1
            }
          ],
          itemStyle: item1
        },
        {
          value: 9,
          children: [
            {
              value: 4,
              children: [
                {
                  value: 2,
                  itemStyle: item2
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item1
                    }
                  ]
                }
              ],
              itemStyle: item1
            },
            {
              children: [
                {
                  value: 3,
                  children: [
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item2
        },
        {
          value: 7,
          children: [
            {
              children: [
                {
                  value: 1,
                  itemStyle: item3
                },
                {
                  value: 3,
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    },
                    {
                      value: 1
                    }
                  ],
                  itemStyle: item2
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 1
                    },
                    {
                      value: 1,
                      itemStyle: item1
                    }
                  ],
                  itemStyle: item1
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item1
        },
        {
          children: [
            {
              value: 6,
              children: [
                {
                  value: 1,
                  itemStyle: item2
                },
                {
                  value: 2,
                  children: [
                    {
                      value: 2,
                      itemStyle: item2
                    }
                  ],
                  itemStyle: item1
                },
                {
                  value: 1,
                  itemStyle: item3
                }
              ],
              itemStyle: item3
            },
            {
              value: 3,
              children: [
                {
                  value: 1
                },
                {
                  children: [
                    {
                      value: 1,
                      itemStyle: item2
                    }
                  ]
                },
                {
                  value: 1
                }
              ],
              itemStyle: item3
            }
          ],
          itemStyle: item1
        }
      ]
      option = {
        title: {
          text: '子路由2',
          left: 'center'
        },
        series: {
          radius: ['15%', '80%'],
          type: 'sunburst',
          sort: undefined,
          emphasis: {
            focus: 'ancestor'
          },
          data: data,
          label: {
            rotate: 'radial'
          },
          levels: [],
          itemStyle: {
            color: '#ddd',
            borderWidth: 2
          }
        }
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
